<template>
    <div class="body">
        <div>
            <h1>车辆管理</h1>
            <el-table :data="currentPageData" style="width: 100%">
                <el-table-column label="车辆图片" width="150">
                    <template v-slot="{ row }">
                        <el-image :src="row.vehiclePhoto" style="width: 50px; height: 50px;"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="vehicleLicense" label="车辆信息介绍" width="200" />
                <el-table-column prop="name" label="车辆驾驶人员" width="200" />
                <el-table-column prop="phone" label="联系电话" width="200" />
                <el-table-column prop="seatCapacity" label="车辆核载人数" width="200" />

                <el-table-column label="车辆状态">

                    <template #default="scope">
                        <el-switch v-model="value[scope.row.id]" class="ml-2" width="60" inline-prompt active-text="启用"
                            inactive-text="禁用" @click="updateCar(scope.row)" />

                    </template>

                </el-table-column>
                <el-table-column align="right">

                    <template #header>
                        <el-input v-model="search" placeholder="请输入内容" />
                    </template>

                </el-table-column>
            </el-table>
        </div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[6]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="allData.length" />
    </div>
</template>
  
<script setup>
import { ref, onMounted, computed } from 'vue'
import request from '@/utils/request'
import { UPDATE_MODEL_EVENT } from 'element-plus';
const search = ref('')
const allData = ref([])
const currentPage = ref(1)
const pageSize = ref(6)
const value = ref([]);


const updateCar = (row) => {

    let requestData = {};

    if (value.value[row.id] === true) {
        requestData = {
            isDeleted: 0
        };
    }
    if (value.value[row.id] === false) {
        requestData = {
            isDeleted: 1
        };
    }

    request
        .put(`manager/car/update/${row.id}`, requestData)
        .then((result) => {
            if (result.success) {

            }
        })
        .catch((error) => {
            console.error('Error updating car:', error);
        });
};

const currentPageData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value
    const end = start + pageSize.value
    return filteredData.value.slice(start, end)
})

const handleSizeChange = (val) => {
    pageSize.value = val
    currentPage.value = 1
}

const handleCurrentChange = (val) => {
    currentPage.value = val
}



const queryPage = () => {
    request.get(`/manager/car`)
        .then((result) => {
            if (result.success) {


                allData.value = result.data
                allData.value.forEach(item => {
                    if (item.isDeleted === 0) {
                        item.isDeleted = "正常"
                        value.value[item.id] = true
                    } else {
                        item.isDeleted = "无法使用"
                        value.value[item.id] = false
                    }
                });
            }
        })
}

onMounted(() => {
    queryPage()
})

const filteredData = computed(() => {
    if (!search.value) {
        return allData.value;
    }
    return allData.value.filter((data) =>
        Object.values(data).some((value) =>
            String(value).toLowerCase().includes(search.value.toLowerCase())
        )
    );
});


</script>
  
<style scoped>
.body {
    padding: 20px;
}
</style>